<template>
    <el-card shadow="never" class="aui-card--fill">
        <el-dialog :visible.sync="visible" title="审核款项" :close-on-click-modal="false" :close-on-press-escape="false"
            width="90%" @close="handleClose">
            <el-table :data="orderPaymentInfoList" border>
                <el-table-column header-align="center" align="center" prop="payAmount" label="支付金额"></el-table-column>
                <el-table-column header-align="center" align="center" prop="payDate" label="实际付款时间"
                    width="160"></el-table-column>
                <el-table-column header-align="center" align="center" prop="paymentMethod" label="支付方式">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.paymentMethod === 0" size="small" type="warning">公账</el-tag>
                        <el-tag v-if="scope.row.paymentMethod === 1" size="small" type="success">个人</el-tag>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="isInvoice" label="是否开票">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isInvoice === 0" size="small" type="danger">未开票</el-tag>
                        <el-tag v-if="scope.row.isInvoice === 1" size="small" type="success">已开票</el-tag>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="是否已回款" width="200">
                    <template slot-scope="scope">
                        <el-switch style="display: block; margin-bottom: 2px;" v-model="scope.row.isReceived"
                            :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"
                            active-text="已回款" inactive-text="未回款" @change="receivedChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="审核情况" width="200">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isExamine === 0" type="text" size="small" @click="examineOrderYes(scope.row)">同意</el-button>
                        <el-button v-if="scope.row.isExamine === 0" type="text" size="small" @click="examineOrderNo(scope.row)">拒绝</el-button>
                        <el-tag v-if="scope.row.isExamine === 1" size="small" type="success">已通过</el-tag>
                        <el-tag v-if="scope.row.isExamine === 2" size="small" type="success">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="processRemark" label="审核备注">
                    <template slot-scope="scope">
                        <el-button type="text" slot="reference" @click="openProcessRemark(scope.row)">填写备注</el-button>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="processRemark"
                    label="备注信息"></el-table-column>
                <el-table-column header-align="center" align="center" prop="processReceivedUserName"
                    label="回款审核员"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="填写审核备注" :visible.sync="openProcessRemarkVisible" width="30%" center  @close="remarkHandleClose">
            <el-input type="textarea" v-model="processRemark"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="openProcessRemarkVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitProcessRemark(processRemark, processRemarkId)">提 交</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
    data() {
        return {
            visible: false,
            dataForm: {
                orderId: '',
                payAmount: '',
                payDate: '',
                paymentMethod: '',
                remark: ''
            },
            orderPaymentInfoList: [],
            paymentMethodList: [
                {
                    label: '公账',
                    value: 0
                },
                {
                    label: '个人',
                    value: 1
                }
            ],
            openProcessRemarkVisible: false,
            processRemark: "",
            processRemarkId: ""
        }
    },
    methods: {
        init() {
            this.visible = true
            this.$nextTick(() => {
                // this.$refs['dataForm'].resetFields()
            })
            this.getOrderpaymentListByOrderId(this.dataForm.orderId)
        },
        // 填写审核备注信息
        openProcessRemark(row) {
            this.openProcessRemarkVisible = true
            this.processRemark = row.processRemark
            this.processRemarkId = row.id
        },
        // 窗口关闭事件
        handleClose() {
            this.visible = false
            this.$emit('refreshDataList')
        },
        // 
        remarkHandleClose() {
            this.getOrderpaymentListByOrderId(this.dataForm.orderId)
        },
        // 根据订单ID查询付款记录
        getOrderpaymentListByOrderId(orderId) {
            this.drawer = true
            this.$http.get("/order/orderpayment/listByOrderId/" + orderId).then(({ data }) => {
                this.orderPaymentInfoList = data.data;
            });
        },
        // 回款提交
        receivedChange(row) {
            this.$http.post('/order/orderpayment/examine/orderPay', {
                id: row.id,
                orderId: row.orderId,
                isReceived: row.isReceived
            }).then(({ data: res }) => {
                if (res.code == 0) {
                    this.$message({
                        message: '回款提交成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('回款提交失败');
                }
            })
        },
        // 审核同意
        examineOrderYes(row) {
            this.$http.post('/order/orderpayment/examine/orderPay', {
                id: row.id,
                orderId: row.orderId,
                isExamine: 1
            }).then(({ data: res }) => {
                if (res.code == 0) {
                    this.$message({
                        message: '审核同意提交成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('审核同意提交失败');
                }
            })
            this.getOrderpaymentListByOrderId(this.dataForm.orderId)
        },
        // 审核不同意
        examineOrderNo(row) {
            this.$http.post('/order/orderpayment/examine/orderPay', {
                id: row.id,
                orderId: row.orderId,
                isExamine: 2
            }).then(({ data: res }) => {
                if (res.code == 0) {
                    this.$message({
                        message: '审核不同意提交成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('审核不同意提交失败');
                }
            })
            this.getOrderpaymentListByOrderId(this.dataForm.orderId)
        },
        // 审核备注提交
        submitProcessRemark(processRemark, processRemarkId) {
            this.$http.put('/order/orderpayment', {
                id: processRemarkId,
                processRemark: processRemark
            }).then(({ data: res }) => {
                if (res.code == 0) {
                    this.$message({
                        message: '审核备注提交成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error('审核备注提交失败');
                }
            })
            this.openProcessRemarkVisible = false
        },
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.$http.post('/order/orderpayment', this.dataForm).then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: this.$t('prompt.success'),
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                }).catch(() => { })
            })
        }, 1000, { 'leading': true, 'trailing': false })
    }
}
</script>